<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body{
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div id="lb">
			<select id="se" name="select">
				<option >选择大小</option>
				<option >大</option>
				<option >小</option>
			</select>
		</div>
		<div id="tp">
			<img src="./img2/1.jpg">
		</div>
		<div id="bt">
			<button id="an" type="button" onclick="doBegin(event)">开始</button>
		</div>
	</body>
	
	<script type="text/javascript">
		function doBegin(event){
			var num = 0;
			event.target.innerText = "抽奖中···";
			var imgs = document.getElementsByTagName('img')[0];
			var doBegins = setInterval(function(){
				var randNum = getRandValidNum();
				imgs.src ="./img2/"+ randNum +".jpg" ;
				num ++;
				if (num > 100){
					clearInterval(doBegins);
					event.target.innerText = '重新抽奖';
				}
			},10);
			var options = document.getElementById('se');
			var a=options.selectedIndex;
			
				if (a == 1 && randNum <=3 ) {
					alert('恭喜，您猜错了');
				}
				else {
					alert('抱歉，您猜对了');
				}
				if (a == 2 && randNum >=4 ) {
					alert('恭喜，您猜错了');
				}
				else {
					alert('抱歉，您猜对了');
				}
			
			
			
		}
		
		function getRandValidNum(){
			while (true){
				var randNum = Math.floor(Math.random()*6);
				if (randNum != 0 ) {
					return randNum;
				}
			}
		}
		
		
		
	</script>
</html>
